<template>
	<div class="group-list-container">
		<!-- 工具栏 -->
		<div class="tool-bar">
			<span class="title">问题分类</span>
			<span class="button" @click="handleCreate"><i class="el-icon-plus"></i></span>
		</div>
		<!-- 问题列表 -->
		<!-- <p class="root-node">
			<span>所有的</span>
		</p> -->
		<el-tree
			:data="groupList"
			:props="defaultProps"
			node-key="id"
			@node-click="handleNodeClick"
			ref="groupTree"
			:default-expanded-keys="defaultExpandedKeys"
			@node-expand="handleNodeExpand"
			@node-collapse="handleNodeCollapse"
		>
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span>{{ node.label }}</span>
				<div v-if="!data.default" @click="handleMenuClick">
					<el-dropdown trigger="click" @command="command => handleCommand(command, node, data)">
						<span class="el-dropdown-link">
							<i class="el-icon-more"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-if="node.level <= 2 && !data.knowledgeBaseCount" command="add" @click="() => add(node, data)">新增分类</el-dropdown-item>
							<el-dropdown-item command="modify" @click="() => modify(node, data)">修改分类</el-dropdown-item>
							<el-dropdown-item command="remove" @click="() => remove(node, data)">删除分类</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</span>
		</el-tree>
	</div>
</template>
<script>
// import { groupMock } from './mock';
export default {
	components: {},
	props: {
		groupList: {
			type: Array,
			default: () => []
		},
		queryMode: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			// groupList: list,
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			total: 10,
			showMenu: false,
			defaultExpandedKeys: []
		};
	},
	watch: {
		groupList: {
			handler(val) {
				if (this.groupList[0]) {
					this.$nextTick(() => {
						const curKey = this.$refs.groupTree.getCurrentKey();
						console.log('curKey ', curKey);
						if (curKey) {
							this.$refs.groupTree.setCurrentKey(curKey);
						} else {
							this.$refs.groupTree.setCurrentKey(this.groupList[0].id);
						}
					});
				}
			},
			deep: true
		},
		queryMode: {
			handler(val) {
				if (val !== 'category') {
					this.$refs.groupTree.setCurrentKey(null);
				}
			}
		}
	},
	mounted() {},
	methods: {
		// 选择分类
		handleNodeClick(data) {
			this.$emit('select', data);
		},
		// 新建根分类
		handleCreate() {
			this.$emit('create');
		},
		// 分类节点下新增子分类
		add(node, data) {
			console.log('add', node, data);
			this.$emit('add', data);
		},
		// 编辑分类名称
		modify(node, data) {
			console.log('modify', node, data);
			this.$emit('modify', data);
		},
		// 删除分类
		remove(node, data) {
			console.log('remove', node, data);
			this.$emit('remove', data);
		},
		handleCommand(command, node, data) {
			console.log('command', command, node, data);
			if (command === 'modify') {
				this.modify(node, data);
			} else if (command === 'remove') {
				this.remove(node, data);
			} else if (command === 'add') {
				this.add(node, data);
			}
		},
		handleMenuClick(event) {
			event.preventDefault();
			event.stopPropagation();
		},
		// 清除选择
		resetCurrentKey() {
			this.$refs.groupTree.setCurrentKey(null);
		},
		handleNodeExpand(data, node, event) {
			// 处理节点展开的逻辑
			console.log('handleNodeExpand', data, node, event);
			this.defaultExpandedKeys.push(data.id);
		},
		handleNodeCollapse(data, node, event) {
			// 处理节点折叠的逻辑
			console.log('handleNodeCollapse', data, node, event);
			const index = this.defaultExpandedKeys.findIndex(item => item === data.id);
			this.defaultExpandedKeys.splice(index, 1);
		},
		// 增加展开节点
		addExpandedKeys(id) {
			this.defaultExpandedKeys.push(id);
		},
		setCurrentKey(key) {
			if (this.queryMode !== 'category') {
				return;
			}
			this.$refs.groupTree.setCurrentKey(key);
		},
	}
};
</script>

<style scoped lang="less">
.group-list-container {
	box-sizing: border-box;
	width: 300px;
	height: 100%;
	min-width: 300px;
	border: 1px solid #ebeef5;

	.tool-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		border-bottom: 1px solid #ebeef5;
		padding: 10px;

		.title {
			font-size: 13px;
			font-weight: 500;
		}

		.button {
			cursor: pointer;
			i {
				font-size: 13px;
			}
		}
	}

	.root-node {
		margin-top: 10px;
	}
	.custom-tree-node {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
}
</style>
<style lang="less">
.group-list-container {
	.el-tree {
		overflow: auto;
		height: calc(100% - 50px);

		.el-tree-node {
			margin-top: 10px;
		}
		.is-current {
			background-color: #f5f7fa;
		}

		.el-dropdown-link {
			margin-right: 10px;
		}
	}
}
</style>
